<template>
	<view class="page-container">
		<!-- 顶部时间信息 -->
		<!-- <view class="time-section">
			<text class="date-text">{{ year }}年{{ month }}月{{ day }}日 {{ week }}</text>
			<text class="time-text">{{ hour }}:{{ minute }}:{{ second }}</text>
		</view> -->

		<!-- 赛事基本信息 -->
		<view class="competition-info">
			<view class="info-item">
				<u-icon name="integral-fill" size="16" color="#999" />
				<text style="margin-left: 10rpx;">男子100米自由泳/ 第3组第2场</text>
			</view>
			<view class="info-item">
				<u-icon name="clock" size="16" color="#999" />
				<text style="margin-left: 10rpx;">2024-03-15 14:30</text>
				<text class="status-tag status-col">检录完毕</text>
				<text class="status-tag status-col">已结束</text>
				<text class="status-tag status-orl">待发布</text>
			</view>
			<view class="info-item">
				<u-icon name="map" size="16" color="#999" />
				<text style="margin-left: 10rpx;">奥体中心游泳馆</text>
			</view>
		</view>

		<!-- 选手列表 -->
		<view class="player-list">
			<view v-for="(player, index) in players" :key="index" class="player-item">
				<!-- 泳道号 -->
				<!-- 头像和选手信息 -->
				<view class="player-at">
					<view class="player-content">
						<image :src="player.image" style="width: 60rpx; height: 60rpx; border-radius: 50%;" />
					</view>
					<view class="player-basic-info">
						<text class="player-name">{{ player.name }}</text>
						<text class="lane-number">{{ player.lane }}</text>
						<view class="player-team">{{ player.team }}</view>
					</view>
				</view>
				<!-- 成绩和排名 -->
				<view class="player-score-rank">
					<text v-if="player.status === '犯规'" class="foul-text">犯规</text>
					<text v-else-if="player.status === '弃权'"  class="foul-text">弃权</text>
					<view class="" v-else>
						<view class="time-text">{{ player.time }}</view>
						<view class="rank-text">第{{ player.rank }}名</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 确认成绩按钮 -->
		<view class="d-flex flex-row justify-space-between justify-center align-center"
			style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 99;">
			<view class="" @click="confirmScore"
				style="width: 100%;height: 80rpx;background: linear-gradient(0deg, rgba(17, 171, 43, 0.9), rgba(132, 202, 125, 0.9), rgba(188, 250, 188, 0.9));color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
				生成榜单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				year: '2025',
				month: '03',
				day: '28',
				week: '周五',
				hour: '21',
				minute: '16',
				second: '47',
				players: [{
						lane: '1道',
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67e6b341267a6.jpeg", // 替换为实际图片地址
						name: '陈俊杰',
						team: '广东省游泳队',
						time: '00:47.77',
						rank: '5'
					},
					{
						lane: '2道',
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67e6b341267a6.jpeg", // 替换为实际图片地址
						name: '刘志豪',
						team: '浙江省游泳队',
						time: '00:47.30',
						rank: '4'
					},
					{
						lane: '3道',
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67e6b341267a6.jpeg", // 替换为实际图片地址
						name: '张雨晨',
						team: '江苏省游泳队',
						time: '00:48.99',
						rank: '6'
					},
					{
						lane: '4道',
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67e6b341267a6.jpeg", // 替换为实际图片地址
						name: '王浩然',
						team: '山东省游泳队',
						time: '00:45.11',
						rank: '1'
					},
					{
						lane: '5道',
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67e6b341267a6.jpeg", // 替换为实际图片地址
						name: '李明阳',
						team: '北京市游泳队',
						time: '00:46.98',
						rank: '3'
					},
					{
						lane: '6道',
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67e6b341267a6.jpeg", // 替换为实际图片地址
						name: '郑子豪',
						team: '上海市游泳队',
						status: '犯规'
					},
					{
						lane: '7道',
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67e6b341267a6.jpeg", // 替换为实际图片地址
						name: '董天成',
						team: '四川省游泳队',
						status: '弃权'
					},
					{
						lane: '8道',
						image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/67e6b341267a6.jpeg", // 替换为实际图片地址
						name: '吴子涵',
						team: '福建省游泳队',
						time: '00:45.86',
						rank: '2'
					}
				]
			};
		},
		methods: {
			confirmScore() {
				console.log('确认成绩');
				uni.navigateTo({
					url: './ranking'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page-container {
		width: 100%;
		min-height: 100vh;
		background-color: #f8f9fa;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.time-section {
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.date-text {
		font-size: 28rpx;
		color: #333;
	}

	.time-text {
		font-size: 32rpx;
		color: #007AFF;
		font-weight: 500;
	}

	.competition-info {
		margin-bottom: 20rpx;
		width: 100%;
		padding: 10rpx;
		background-color: #fff;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.info-item u-icon {
		margin-right: 12rpx;
		color: #999;
	}

	.info-item text {
		font-size: 24rpx;
		color: #666;
	}

	.status-tag {
		margin-left: 10rpx;
		padding: 6rpx 12rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
	}

	.status-col {
		color: #4CAF50 !important;
	}

	.status-orl {
		color: #ffd590 !important;
	}

	.player-list {
		flex: 1;
		overflow-y: auto;
		margin-bottom: 100rpx;
	}
	
	.player-at{
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.player-item {
		display: flex;
		flex-direction: row;
		padding: 30rpx 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 20rpx;
		align-items: center;
	}

	.lane-number {
		width: 60rpx;
		font-size: 24rpx;
		color: #666;
		text-align: center;
	}

	.player-content {
		// flex: 1;
		display: flex;
		align-items: center;
		margin-right: 20rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.player-basic-info view {
		font-size: 24rpx;
		color: #666;
	}

	.player-name {
	}

	.player-score-rank {
		display: flex;
		flex-direction: row;
	}

	.time-text {
		font-size: 24rpx;
		color: #007AFF;
	}

	.rank-text {
		font-size: 24rpx;
		color: #999;
		text-align: right;
	}

	.foul-text {
		color: #ff4444;
		font-size: 24rpx;
	}

	.confirm-btn {
		background-color: #4CAF50;
		color: #fff;
		padding: 18rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>